<template>
  <div class="category_page footer-page">
    <div class="top_tabs">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in tabList"
          :key="item.id"
          :label="item.cate_name"
          :name="item.id+''"
        >
        </el-tab-pane>
      </el-tabs>
      <el-link
        v-if="tabList.length > 0 && $hasMethod('#add')"
        href="/webConfig/category"
        :underline="false"
        type="primary"
      >添加品类</el-link>
    </div>
    <div class="flex tab_content">
      <div class="img_wrapper">
        <el-image :src="require('../../../assets/images/demo_cate.jpg')">
          <div
            slot="error"
            class="image-slot"
          >
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div class="config_wrapper">
        <div
          v-if="!$hasMethod('#edit')"
          class="mask"
        ></div>
        <h5>{{configTitle}}</h5>
        <div class="main">
          <div class="warn-box">
            <svg-icon
              style="margin-right:17px"
              icon-class="warn"
              :size="20"
            />
            <p><span>图片要求！</span><br />商品图片要求PNG格式透明底图片；图片尺寸要求500×500px；</p>
          </div>
          <div class="pos_list">
            <div
              v-for="(item, index) in dataList"
              :key="index"
              class="pos_item"
            >
              <div class="flex flex-between-center title">
                <span>推荐位{{index+1}}</span>
                <p v-if="$hasMethod('#edit')">
                  <span
                    class="pointer"
                    @click="upSortPos(index)"
                  ><i class="el-icon-top"></i></span>
                  <span
                    class="pointer"
                    @click="downSortPos(index)"
                  ><i class="el-icon-bottom"></i></span>
                  <span
                    class="pointer"
                    @click="deletePos(index)"
                  ><i class="el-icon-delete"></i></span>
                </p>
              </div>
              <goods-form
                :show-tool="$hasMethod('#edit')"
                :form-data="item"
                :show-checked-tool="true"
                :show-subtitle="false"
              ></goods-form>
            </div>
          </div>
          <el-divider v-if="dataList.length > 0 && dataList.length < 4 && $hasMethod('#edit')"></el-divider>
          <div
            class="add-div"
            v-if="dataList.length < 4 && $hasMethod('#edit')"
            @click="addRecommend"
          >
            <i class="el-icon-plus"></i>添加推荐位({{dataList.length}}/4)
          </div>
        </div>
      </div>
    </div>
    <div
      class="page-footer-btns"
      v-if="$hasMethod('#edit')"
    >
      <el-button
        size="small"
        @click="reset"
      >重置</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >保存</el-button>
    </div>
  </div>
</template>

<script>
import { getCategory, getCategoryGoodsById, addCategoryGoods } from "@/api/recommend";
import goodsForm from "../compoments/form";
export default {
  components: { goodsForm },
  data() {
    return {
      activeName: "",
      tabList: [],
      dataList: []
    }
  },
  computed: {
    configTitle() {
      const tab = this.tabList.find(item => item.id == this.activeName);
      return tab ? tab.cate_name : "商品推荐设置";
    },
  },
  methods: {
    // 升序
    upSortPos(index) {
      if (index === 0) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index - 1]);
      this.$set(this.dataList, index - 1, item);
    },
    // 降序
    downSortPos(index) {
      if (index === this.dataList.length - 1) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index + 1]);
      this.$set(this.dataList, index + 1, item);
    },
    // 删除推荐位
    deletePos(index) {
      this.dataList.splice(index, 1);
    },
    // 添加推荐位
    addRecommend() {
      this.dataList.push({
        goods_name: "",
        goods_img: "",
        goods_id: null
      })
    },
    submit() {
      // 保存
      console.log(this.activeName, this.dataList);
      for (let index in this.dataList) {
        if (!this.dataList[index].goods_name) {
          this.$message({
            message: "推荐位" + (parseInt(index) + 1) + "名称不能为空",
            type: "warning"
          });
          return;
        }
        if (!this.dataList[index].goods_img) {
          this.$message({
            message: "推荐位" + (parseInt(index) + 1) + "图片不能为空",
            type: "warning"
          });
          return;
        }
        if (!this.dataList[index].goods_id) {
          this.$message({
            message: "推荐位" + (parseInt(index) + 1) + "请绑定商品链接",
            type: "warning"
          });
          return;
        }
      }
      addCategoryGoods({
        cate_id: this.activeName,
        goods_arr: this.dataList
      }).then(res => {
        this.getGoods();
      });
    },
    reset() {
      // 重置
      this.getGoods();
    },
    handleClick(tab) {
      this.getGoods();
    },
    // 获取对应商品列表
    getGoods() {
      getCategoryGoodsById(this.activeName).then(res => {
        let list = [];
        for (let item of res) {
          list.push({
            ...item,
            goodsData: {
              goods_id: item.goods_id,
              title: item.title,
              imgurl: item.imgurl,
              cate_name: item.cate_name
            }
          })
        }
        this.dataList = list;
      })
    },
    // 获取tabs
    getTabs() {
      getCategory().then(res => {
        this.tabList = res;
        this.activeName = this.tabList[0].id + "";
        this.getGoods();
      });
    }
  },
  mounted() {
    this.getTabs();
  }
}
</script>

<style lang="scss" scoped>
</style>
